<template>
<div>

<!--  高级查询-->
<el-row>
  <el-col :span="4">  <el-input v-model="gaocha.caseNo" placeholder="案号" ></el-input></el-col>
  <el-col :span="4">
    <el-cascader Cascader clearable :options="options" placeholder="请选择收支类别"  v-model="gaocha.cwInoutTypeId" :show-all-levels="false" :props='{label:"cwName",value:"id",emitPath:false}'></el-cascader>
  </el-col>
  <el-col :span="3">
    <el-select v-model="gaocha.cwPayType" placeholder="请选择支付方式">
      <el-option label="请选择支付方式" value=""></el-option>
      <el-option v-for="(item,index) in zhifufangshi" :key="index" :label="item.zfname" :value="item.zfid"></el-option>
    </el-select>
  </el-col>
  <el-col :span="1.3"  >
    录入日期:<br>
    (区间)
  </el-col>
  <el-col :span="3">
    <el-date-picker type="date" v-model="gaocha.sta" placeholder="选择开始时间"
                    value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>


  </el-col>

  <el-col :span="3">
    <el-date-picker type="date" v-model="gaocha.ends" placeholder="选择结束时间"
                    value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
  </el-col>



  <el-col :span="5">
    <el-button type="primary" plain @click="gaojijiansuo">检索</el-button>
  </el-col>
<!--  高级查询结束-->

</el-row>








<!--  渲染数据库里 cw_inout 表的字段数据-->
  <template>
    <el-table
        :summary-method="getSummaries"
        show-summary
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="cwName"
          label="收支类别"
          width="180">
      </el-table-column>
      <el-table-column
          prop="cwInoutDate"
          label="发生日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="cwInoutMoney"
          label="收支金额(元)">
      </el-table-column>


      <el-table-column
          prop="zfname"
          label="支付方式">
      </el-table-column>
      <el-table-column
          prop="caseNo"
          label="案号">
      </el-table-column>

      <el-table-column
          prop="cwEnteringdate"
          label="录入日期">
      </el-table-column>
      <el-table-column
          prop="cwRemark"
          label="备注">
      </el-table-column>
    </el-table>
  </template>
  <!--分页-->
  <!-- 分页组件 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="gaocha.currentPage"
      :page-sizes="[5, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>

  <!--分页结束-->
</div>
</template>

<script>
export default {
  name: "CwInout",
  data(){
    return{
      tableData: [], //存储所有数据
      total :0,       //
      gaocha:{
        currentPage:1, //初始页
        pageSize:5,    //    每页的数据
        userid :JSON.parse(localStorage["user"])[0].id,//用户id
        caseNo: "",  //案号
        cwInoutTypeId: "", //收支类别id
        cwPayType: "", //支付方式id
        sta : "", //开始时间
        ends : "" //结束时间

      },
      options:[]  ,      //递归数据  收支类别
      zhifufangshi:[] //支付方式
    }
  },
  methods:{
    //分页
    // 每页显示的几条数据
    handleSizeChange: function (size) {
      this.gaocha.pageSize = size;
   //   console.log(this.gaocha.pageSize)
      this.GetLogJob()
    },
    //当前页
    handleCurrentChange: function(currentPage){
      this.gaocha.currentPage = currentPage;
     // console.log(this.gaocha.currentPage)
      this.GetLogJob()
  },
    //查询 or 高级查询
    GetLogJob(){
      this.$http.get('/cwInout',{params:this.gaocha})
          .then(res =>{
            //所有的数据
            this.tableData=res.data.data.list
            //数据总条数
            this.total=  res.data.data.total

          })

    },
    //收支类型的数据
    digui(){
      this.$http.get('/cwInoutType')
          .then(res =>{this.options=res.data.data
          //  console.log(this.options)
          })
    },
    //支付方式
    cwZffs(){
       this.$http.get('/cwZffs')
          .then(res =>{this.zhifufangshi=res.data.data
        //    console.log(this.zhifufangshi)
          })
    },
    //高级查询
    gaojijiansuo(){
      this.GetLogJob();
    }
    ,
    //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
if(  sums[index]==0){return   sums[index]=""; }

          sums[index] += ' 元';
        } else {
         return;
        }

      });
      return sums;
    }
}
,created() {
    this.GetLogJob();//查询
    this.digui();//递归 收支类别
    this.cwZffs();// 支付方式
  }
}
</script>

<style scoped>

</style>